<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>馆藏数量榜单</title>

    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/font-awesome/css/font-awesome.css}" rel="stylesheet">
    <link th:href="@{/css/animate.css}" rel="stylesheet">
    <link th:href="@{/css/style.css}" rel="stylesheet">
    <style type="text/css">
        .flot-chart{
            height: 60vh;
        }
    </style>

</head>

<body>

<div id="wrapper">

    <nav class="navbar-default navbar-static-side" role="navigation">
        <div class="sidebar-collapse">
            <ul class="nav metismenu" id="side-menu">
                <li class="nav-header">
                    <div class="dropdown profile-element">
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                                <span class="clear"> <span class="block m-t-xs"> <strong class="font-bold">惠岩</strong>
                             </span> <span class="text-muted text-xs block">管理员 <b class="caret"></b></span> </span>
                        </a>
                        <ul class="dropdown-menu animated fadeInRight m-t-xs">
                            <li class="divider"></li>
                            <li><a href="/custom/logout">退出登录</a></li>
                        </ul>
                    </div>
                    <div class="logo-element">
                        摆烂
                    </div>
                </li>
                <li>
                    <a href="/custom/myAppoint"><i class="fa fa-home"></i> <span class="nav-label">个人中心</span></a>
                </li>
                <li class="active">
                    <a href="/dispatcher/graph_flot"><i class="fa fa-bar-chart-o"></i> <span class="nav-label">借阅榜</span></a>
                </li>
                <li>
                    <a href="/custom/listBook?bookName="><i class="fa fa-bar-chart-o"></i> <span class="nav-label">浏览馆藏</span></a>
                </li>
                <li>
                    <a href="/customer/adminBook/listBook"><i class="fa fa-table"></i> <span
                            class="nav-label">管理图书</span><span class="fa arrow"></span></a>
                    <ul class="nav nav-second-level collapse">
                        <li><a href="/customer/adminBook/listBook">查看图书</a></li>
                        <li><a href="/customer/adminBook/addBookPage">添加图书</a></li>
                    </ul>
                </li>
                <li>
                    <a href="/customer/adminUser/listUser?userId="><i class="fa fa-slideshare"></i> <span class="nav-label">管理用户</span><span
                            class="fa arrow"></span></a>
                    <ul class="nav nav-second-level collapse">
                        <li><a href="/customer/adminUser/listUser?userId=">查看用户</a></li>
                        <li><a href="/customer/adminOperation/listAction?userId=">用户借阅情况</a></li>
                    </ul>
                </li>
                <li>
                    <a href="/uploadPage"><i class="fa fa-send"></i> <span class="nav-label">文件上传</span></a>
                </li>
            </ul>

        </div>
    </nav>

    <div id="page-wrapper" class="gray-bg">
        <div class="row border-bottom">
        </div>
        <div class="row wrapper border-bottom white-bg page-heading">
            <div class="col-lg-10">
                <h2>馆藏数量榜单</h2>
                <ol class="breadcrumb">
                    <li>
                        <a href="/">首页</a>
                    </li>
                    <li>
                        <a>图表</a>
                    </li>
                    <li class="active">
                        <strong>馆藏榜</strong>
                    </li>
                </ol>
            </div>
            <div class="col-lg-2">

            </div>
        </div>

        <div class="wrapper wrapper-content animated fadeInRight bookChart">
            <div class="row">
                <div class="col-lg-14">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>馆藏图书榜</h5>
                            <div class="ibox-tools">
                                <a class="collapse-link">
                                    <i class="fa fa-chevron-up"></i>
                                </a>
                                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                    <i class="fa fa-wrench"></i>
                                </a>
                                <ul class="dropdown-menu dropdown-user">
                                    <li><a href="#">设置 1</a>
                                    </li>
                                    <li><a href="#">设置 2</a>
                                    </li>
                                </ul>
                                <a class="close-link">
                                    <i class="fa fa-times"></i>
                                </a>
                            </div>
                        </div>
                        <div class="ibox-content">
                            <div class="flot-chart">
                                <div class="flot-chart-content" id="flot-bar-chart"></div>
                            </div>
                        </div>
                    </div>
                </div>

        <div class="footer">
            <div class="pull-right">
                摆烂图书管理系统
            </div>
            <div>
                <strong>Copyright</strong> 摆烂联盟 &copy; 2022
            </div>
        </div>
    </div>
</div>


<!-- Mainly scripts -->
<script th:src="@{/js/jquery-2.1.1.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/plugins/metisMenu/jquery.metisMenu.js}"></script>
<script th:src="@{/js/plugins/slimscroll/jquery.slimscroll.min.js}"></script>

<!-- Flot -->
<script th:src="@{/js/plugins/flot/jquery.flot.js}"></script>
<script th:src="@{/js/plugins/flot/jquery.flot.tooltip.min.js}"></script>
<script th:src="@{/js/plugins/flot/jquery.flot.resize.js}"></script>
<script th:src="@{/js/plugins/flot/jquery.flot.pie.js}"></script>
<script th:src="@{/js/plugins/flot/jquery.flot.time.js}"></script>

<!-- Custom and plugin javascript -->
<script th:src="@{/js/inspinia.js}"></script>
<script th:src="@{/js/plugins/pace/pace.min.js}"></script>

<!-- Flot demo data -->
<script>

    let books;
    $(function () {
        var barOptions = {
            series: {
                bars: {
                    show: true,
                    barWidth: 0.6,
                    fill: true,
                    fillColor: {
                        colors: [{
                            opacity: 0.8
                        }, {
                            opacity: 0.8
                        }]
                    }
                }
            },
            xaxis: {
                tickDecimals: 0
            },
            colors: ["#1ab394"],
            grid: {
                color: "#999999",
                hoverable: true,
                clickable: true,
                tickColor: "#D4D4D4",
                borderWidth: 0
            },
            legend: {
                show: false
            },
            tooltip: true,
            tooltipOpts: {
                content: "x: %x, y: %y"
            }
        };


        $.ajax({
            async: false,
            url:"/customer/book/chart?book_num=8",
            type:"get",
            dataType:"json",
            contentType:"application/json",
            error: function (data) {
                console.log(data);
            },
            success:function (response) {
                books = response;

                console.log(books)
            }

        });

        var barData = {
            label: "bar",
            data: books.value
        };

        $.plot($("#flot-bar-chart"), [barData], barOptions);

    });
</script>

</body>

</html>